<template>
<el-row :gutter="20">
  <el-col :span="12">
    <el-form :model="Form"   label-width="150px" >
      <el-form-item label="请求地址" >
        <el-input v-model="Form.localip" ></el-input>
      </el-form-item>
      <el-form-item label="账号" >
        <el-input v-model="Form.account" ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="Form.pw" ></el-input>
      </el-form-item>
      <el-form-item label="" >
        <el-button type="primary" @click="onlogin">登录</el-button>
      </el-form-item>
      <el-form-item label="appid" >
        <el-input v-model="Form.appid" ></el-input>
      </el-form-item>
      <el-form-item label="areaid" >
        <el-input v-model="Form.areaid" ></el-input>
        <el-checkbox v-model="Form.checked">是否此参数</el-checkbox>
      </el-form-item>
      <el-form-item label="token" >
        <el-input v-model="Form.token" ></el-input>
      </el-form-item>
       <el-form-item label="key" >
        <el-input v-model="Form.key" ></el-input>
      </el-form-item>
      <el-form-item label="data">
        <el-input
         type="textarea"
         :rows="10"
         placeholder="data参数包含的json"
         v-model="Form.textareajson">
        </el-input>
      </el-form-item>
       <el-form-item label="" prop="name">
        <el-button type="primary" @click="onRequest">请求</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :show-file-list="false" multiple>
          <el-button class="custom-btn" size="small">上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    </el-col >
    <el-col :span="12">
      <json-viewer :value="logindata"></json-viewer>
      <json-viewer :value="responsedata"></json-viewer>
    </el-col>
</el-row >
</template>
<script>
import crypto from 'crypto';
import { onLogin, onRequestt, onUpdate } from '../api/api';

export default {
  data() {
    return {
      Form: {
        localip: '',
        account: '',
        pw: '',
        appid: '',
        areaid: '',
        checked: false,
      },
      logindata: null,
      responsedata: null,
    };
  },
  methods: {
    onlogin() {
      this.GLOBAL.IP = this.Form.localip;
      const timestamp = new Date().getTime();
      const data = JSON.stringify({
        timestamp,
        appid: this.GLOBAL.APPID,
        posts: {
          account: this.Form.account,
          password: crypto.createHash('md5').update(this.Form.pw).digest('hex'),
        },
      });
      const loginParams = {
        timestamp,
        data,
      };
      onLogin(loginParams).then((data) => {
        this.logindata = data;
      });
    },
    onRequest() {
      this.GLOBAL.IP = this.Form.localip;
      this.GLOBAL.APPID = this.Form.appid;
      this.GLOBAL.KEY = this.Form.key;
      this.GLOBAL.TOKEN = this.Form.token;
      const timestamp = new Date().getTime();
      const data = this.Form.textareajson;
      let Params = {};
      console.log(this.Form.checked);
      if (this.Form.checked === true) {
        Params = {
          timestamp,
          data,
          areaId: this.Form.areaid,
        };
      } else {
        Params = {
          timestamp,
          data,
        };
      }
      onRequestt(Params).then((data) => {
        this.responsedata = data;
      });
    },
    uploadFileMethod(param) {
      this.GLOBAL.IP = this.Form.localip;
      this.GLOBAL.APPID = this.Form.appid;
      this.GLOBAL.KEY = this.Form.key;
      this.GLOBAL.TOKEN = this.Form.token;
      const fileObject = param.file;
      const formData = new FormData();
      formData.append('images', fileObject);
      const timestamp = new Date().getTime();
      const data = this.Form.textareajson;
      formData.append('timestamp', timestamp);
      formData.append('data', data);
      onUpdate(formData).then((data) => {
        this.responsedata = data;
      });
    },
  },
};
</script>



